<template>
  <div class="project_nav_item flex" :class="[{ avtive: navSelected?.projectId == item.id }]" @click="SetSelect">
    <span class="item_id">{{ item.projectId }}</span>
    <span class="item_name">{{ item.title }}</span>
    <div class="item_detail" v-show="navSelected?.projectId == item.id" @click="isShow = 1">
      <span>查看详情</span>
      <span class="iconfont icon-youjiantou1"></span>
    </div>
    <span class="line"></span>
  </div>
</template>

<script lang="ts" setup>
import { IProject } from '@/types/project';
import { inject, Ref } from 'vue';
const props = defineProps<{ item: IProject }>()
const isShow = inject("isshow")
const navSelected = inject<Ref<IProject>>("navSelected");
function SetSelect() {
  navSelected!.value = props.item;
}



</script>

<style lang="scss" scoped>
.project_nav_item {
  position: relative;
  padding: 10px 20px;
  margin: 10px;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  border-radius: 20px;
  align-items: flex-start;

  &.avtive {
    background-color: rgba($color: #3F8CFF, $alpha: .06);

    .line {
      position: absolute;
      width: 4px;
      top: 0;
      right: -7px;
      height: 100%;
      background-color: #3F8CFF;
    }
  }



  .item_id {
    color: #91929E;
    font-size: 12px;
  }

  .item_name {
    font-size: 16px;
  }

  .item_detail {
    color: #3F8CFF;
    display: flex;
    gap: 4px;
  }
}
</style>